<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片默认的下间隙</title>
    <style>
        img{
            /* display: block; */
            vertical-align: top;

        }
        .pic{
            /* line-height:2px; */
            /* font-size:0; */
        }
    </style>
</head>

<body>
    <!-- img =》 display:inline-block 

        vertical-align:baseline

        只能加在  -  inline/inline-block/table-cell => 才能使用 vertical-align

        display:block/float  =》 vertical-align 失效

        图标icon  +  文字 
        -  icon = display:inline-bloack  左右结构
        -  vertical-align 垂直对齐   
     -->
    <div class="pic" style="background-color:red;color:#fff;text-align: center;">
        <img src="https://k.sinaimg.cn/n/news/transform/310/w710h400/20201209/ef11-keyancx4642969.jpg/w710h400z1l50t1176.jpg?by=comos">
    </div>
</body>

</html>